<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性</title>
    <script src="scripts/jquery-3.4.1.min.js"></script>
    <script src="scripts/vue.js" type="text/javascript" charset="UTF-8"></script>    
    <style>
        .header{
            width: 40px;height: 50px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--一般写法-->
        <p>{{firstname+lastname}}</p>        
        <!--计算属性-->
        <p>{{fullname}}</p>
        <!--逆序显示一个单词-->
        <p>{{word.split("").reverse().join("")}}</p>
        <p>{{reverseWord}}</p>
        <h1>将年龄为偶数的学生显示到页面中</h1>
        <ul>
            <li v-for="item,index in StudentsByAgeEven">{{index}}、{{item.id}}---{{item.name}}---{{item.age}}---<img :src="item.imgheader" class="header"></li>
        </ul>
        <h1>将年龄为奇数的学生显示到页面中</h1>
        <ul>
            <li v-for="item,index in StudentsByAgeOdd">{{index}}、{{item.id}}---{{item.name}}---{{item.age}}---<img :src="item.imgheader" class="header"></li>
        </ul>
    </div>
    <script type="text/javascript" >
    let app=new Vue({
        el:"#app",
        data:{
            firstname:"张",
            lastname:"三",
            word:"music",
            students:[
                {
                    id:1,
                    name:"张三",
                    age:25,
                    imgheader:"https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4016333918,4269266815&fm=26&gp=0.jpg"
                },
                {
                    id:2,
                    name:"李四",
                    age:24,
                    imgheader:"https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3743111107,1940472030&fm=111&gp=0.jpg"
                },
                {
                    id:3,
                    name:"王五",
                    age:23,
                    imgheader:"https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4090061760,3566002114&fm=26&gp=0.jpg"
                },
                {
                    id:5,
                    name:"赵六",
                    age:22,
                    imgheader:"https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3256100974,305075936&fm=26&gp=0.jpg"
                },
                {
                    id:6,
                    name:"孙琦",
                    age:21,
                    imgheader:"https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1306607258,967818222&fm=111&gp=0.jpg"
                }
        ]
        },
        computed:{
            fullname:function(){
                return this.firstname+this.lastname;
            },
            reverseWord:function(){
                return this.word.split("").reverse().join("");
            },
            StudentsByAgeEven:function(){
                let results = this.students.filter((item,i)=>{
                    return item.age%2==0;
                })
                return results;
            },
            StudentsByAgeOdd:function(){
                let results = this.students.filter((item,i)=>{
                    return item.age%2!=0;
                })
                return results;
            }
        }
    });
    </script>
</body>
</html>